<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style type="text/css">
        .ad{
            height: 400px;
            width: 300px;
            border: 1px solid #bfbfbf;
            margin-top: 100px;
            margin-left: 200px;
            overflow: hidden;
            position: relative;
        }
        .adL{
            width: 1800px;
            height: 400px;
            position: absolute;
        }
        .adL img{
            height: 400px;
            width: 300px;
        }
    </style>
    <script>

        var Lun = function () {
            var img = document.getElementById('ADL');
            var _left = parseInt(img.style.left);
            if (_left <=-1500){
                img.style.left = 0;
            }else {
                img.style.left = --_left + 'px';
            }
        };
        //页面加载完成
        window.onload = function () {
            //window.setInterval(Lun,10);
            //返回一个时间执行对象
            ad_timer = window.setInterval(Lun,1);

            //做鼠标悬停
            document.getElementById('ADL').onmouseover = function () {
                //清除时间对象
                window.clearInterval(ad_timer);
                this.style.cursor = 'pointer';
            };
            //鼠标离开图片
            document.getElementById('ADL').onmouseout = function () {
                ad_timer = window.setInterval(Lun,1);
            };

        };

    </script>
</head>
<body>
<div class="ad">
    <div class="adL" id="ADL" style="left: 0;">
        <img src="../img/ad_/ad.jpeg"><img src="../img/ad_/ad2.jpg"><img src="../img/ad_/ad3.jpg"><img src="../img/ad_/ad4.jpg"><img src="../img/ad_/ad5.jpg"><img src="../img/ad_/ad.jpeg">
    </div>
</div>

</body>
</html>